<template>
  <view class="workbench-container">

    <!-- 搜索弹出层 -->
    <uni-popup ref="searchPopup" type="bottom" background-color="#fff" :mask-click="false">
      <view class="search-popup">
        <view class="search-popup-header">
          <view class="search-popup-input-wrapper">
            <view class="search-type-selector" @click="toggleTypeDropdown">
              <text>{{ searchTypes[currentSearchType] }}</text>
              <uni-icons type="bottom" size="14" color="#666"></uni-icons>
            </view>
            <view class="search-popup-input">
              <uni-icons type="search" size="18" color="#666"></uni-icons>
              <input type="text" v-model="searchKeyword" placeholder="搜索房源、合同" focus />
            </view>
          </view>
          <text class="search-popup-cancel" @click="closeSearchPopup">取消</text>
        </view>

        <!-- 搜索类型下拉框 -->
        <view class="search-type-dropdown" v-if="showTypeDropdown" :class="{ 'dropdown-closing': isDropdownClosing }">
          <view v-for="(type, index) in searchTypes" :key="index" class="search-type-item"
            @click="selectSearchType(index)">
            <text>{{ type }}</text>
          </view>
        </view>

        <!-- 搜索历史 -->
        <view class="search-history">
          <view class="search-section-title">
            <text>搜索历史</text>
            <uni-icons type="trash" size="18" color="#999" @click="clearSearchHistory"></uni-icons>
          </view>
          <view class="search-tags">
            <uni-tag v-for="(item, index) in searchHistory" :key="'history-' + index" :text="item" size="normal"
              type="default" @click="useSearchTag(item)" class="search-uni-tag" />
          </view>
        </view>

        <!-- 推荐标签 -->
        <view class="search-recommend">
          <view class="search-section-title">
            <text>推荐标签</text>
          </view>
          <view class="search-tags">
            <uni-tag v-for="(item, index) in recommendTags" :key="'recommend-' + index" :text="item" size="normal"
              type="default" @click="useSearchTag(item)" class="search-uni-tag" />
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 顶部搜索区 - 固定定位 -->
    <view class="search-header">
      <view class="search-bar">
        <image class="avatar" src="/static/head.png" @click="openMine"></image>
        <view class="search-input">
          <uni-icons type="search" size="18"></uni-icons>
          <input type="button" placeholder="搜房源、合同" @click="goToSearch" />
        </view>
        <view class="header-icons">
          <image class="header-icon" src="/static/workbench/scan.svg" mode="aspectFit" @click="handleScan"></image>
          <image class="header-icon" src="/static/workbench/qrcode.svg" mode="aspectFit" @click="openQrcodePopup">
          </image>
          <image class="header-icon" src="/static/workbench/headphone.svg" mode="aspectFit" @click="openServicePopup">
          </image>
        </view>
      </view>
    </view>

    <!-- 可滚动内容区域 -->
    <scroll-view class="scrollable-content" scroll-y :show-scrollbar="false" refresher-enabled
      :refresher-background="'#1890ff'" :refresher-triggered="isTriggered" @refresherrefresh="onRefresh"
      @refresherpulling="onPullingDown">
      <!-- 待收待付数据区 -->
      <view class="header">
        <view class="data-section">
          <view class="data-item" @click="goToOverdue">
            <text class="label">待收逾期（万元）</text>
            <text class="amount">0.00</text>
            <text class="sub-text">今日0笔，30日内0笔</text>
          </view>
          <view class="data-item" @click="goToPayableOverdue">
            <text class="label">待付逾期（万元）</text>
            <text class="amount">0.00</text>
            <text class="sub-text">今日0笔，30日内0笔</text>
          </view>
        </view>
      </view>


      <view class="content-wrapper">
        <!-- 功能模块区 -->
        <view class="function-grid">
          <view class="grid-item more" @click="goToMore">
            <image src="/static/tabbar/svg/more.svg" mode="aspectFit"></image>
            <text>更多</text>
          </view>
        </view>
        <!-- 新手引导区 -->
        <view class="guide-section" @click="goToGuide">
          <view class="guide-content">
            <text class="guide-title">新手上路</text>
            <text class="guide-desc">轻松上手系统，带你玩转管理后台</text>
          </view>
          <uni-icons type="right" size="20" color="#8B4513"></uni-icons>
        </view>

        <!-- 提醒数据区 -->
        <view class="reminder-section">
          <view class="section-title">提醒</view>
          <view class="reminder-list">
            <view class="reminder-item" @click="goToVacantHouse">
              <text class="number active">50</text>
              <text class="label">空房快查</text>
            </view>
            <view class="reminder-item" @click="goToLeaveContract">
              <text class="number">36</text>
              <text class="label">30天离店</text>
            </view>
            <view class="reminder-item" @click="goToIncomingContract">
              <text class="number">5</text>
              <text class="label">30天搬入</text>
            </view>
            <view class="reminder-item" @click="goToExpireContract">
              <text class="number">20</text>
              <text class="label">合同到期</text>
            </view>
            <view class="reminder-item" @click="goToUnfinishedContract">
              <text class="number">5</text>
              <text class="label">退租未结</text>
            </view>
          </view>
        </view>

        <!-- 广告banner -->
        <view class="banner" @click="goToTest">
          <image src="/static/banner.png" mode="aspectFill"></image>
        </view>

        <!-- 工单区域 -->
        <view class="work-order">
          <view class="section-title">工单</view>
          <view class="order-count" @click="goToBindContract">
            <text class="number">147</text>
            <text class="label">待绑定</text>
          </view>
        </view>


        <!-- 财务和库存区域 -->
        <uni-collapse>
          <!-- 财务区域 -->
          <uni-collapse-item :border="false">
            <template v-slot:title>
              <view class="section-header">
                <text>财务</text>
              </view>
            </template>
            <view class="finance-content">
              <!-- 上半部分：2月实际结余 -->
              <view class="finance-row">
                <view class="finance-left">
                  <text class="big-amount">0.00</text>
                  <text class="month-label">2月实际结余</text>
                </view>
                <view class="finance-right">
                  <view class="finance-data">
                    <text class="data-amount">0.00</text>
                    <text class="data-label">收入(已发生)</text>
                  </view>
                  <view class="finance-data">
                    <text class="data-amount">0.00</text>
                    <text class="data-label">支出(已发生)</text>
                  </view>
                </view>
              </view>

              <view class="divider"></view>

              <!-- 下半部分：2月预期结余 -->
              <view class="finance-row">
                <view class="finance-left">
                  <text class="big-amount">0.00</text>
                  <text class="month-label">2月预期结余</text>
                </view>
                <view class="finance-right">
                  <view class="finance-data">
                    <text class="data-amount">0.00</text>
                    <text class="data-label">收入(含预期)</text>
                  </view>
                  <view class="finance-data">
                    <text class="data-amount">0.00</text>
                    <text class="data-label">支出(含预期)</text>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>

          <!-- 库存区域 -->
          <uni-collapse-item :border="false">
            <template v-slot:title>
              <view class="section-header">
                <text>库存</text>
              </view>
            </template>
            <view class="inventory-content">
              <!-- 房源统计 -->
              <view class="house-operation">
                <view class="operation-title">房源统计</view>
                <view class="operation-stats">
                  <view class="stat-item">
                    <text class="number">0%</text>
                    <text class="label">空置率</text>
                  </view>
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">全部</text>
                  </view>
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">空置中</text>
                  </view>
                </view>
              </view>
              <!-- 收房统计 -->
              <view class="house-operation">
                <view class="operation-title">收房统计</view>
                <view class="operation-stats">
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">今日</text>
                  </view>
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">本周</text>
                  </view>
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">本月</text>
                  </view>
                </view>
              </view>
              <!-- 出房统计 -->
              <view class="house-operation">
                <view class="operation-title">出房统计</view>
                <view class="operation-stats">
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">今日</text>
                  </view>
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">本周</text>
                  </view>
                  <view class="stat-item">
                    <text class="number">0</text>
                    <text class="label">本月</text>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </scroll-view>

    <!-- 个人中心抽屉 -->
    <uni-drawer ref="drawer" mode="left" :mask-click="true" @change="handleDrawerChange">
      <view class="drawer-content">
        <!-- 用户信息区域 -->
        <view class="user-info" @click="navigateTo('/pages/account/index')">
          <image class="avatar" src="/static/head.png" mode="aspectFill"></image>
          <view class="enterprise-info">
            <text class="enterprise-name">鹏</text>
            <text class="enterprise-tag">企业认证</text>
          </view>
        </view>

        <!-- 功能菜单列表 -->
        <view class="menu-list">
          <view class="menu-item" @click="navigateTo('/pages/apartment/index')">
            <view class="menu-icon">
              <uni-icons type="home" size="24"></uni-icons>
            </view>
            <text class="menu-text">我的公寓</text>
            <text class="menu-action">切换</text>
          </view>

          <view class="menu-item" @click="navigateTo('/pages/guide/index')">
            <view class="menu-icon">
              <uni-icons type="help" size="24"></uni-icons>
            </view>
            <text class="menu-text">新手上路</text>
            <text class="version">领福利</text>
          </view>

          <view class="menu-item" @click="navigateTo('/pages/feedback/index')">
            <view class="menu-icon">
              <uni-icons type="chat" size="24"></uni-icons>
            </view>
            <text class="menu-text">功能建议</text>
          </view>

          <view class="menu-item" @click="navigateTo('/pages/about/index')">
            <view class="menu-icon">
              <uni-icons type="info" size="24"></uni-icons>
            </view>
            <text class="menu-text">关于</text>
            <text class="version">v10.6.6</text>
          </view>

          <view class="menu-item" @click="navigateTo('/pages/account/index')">
            <view class="menu-icon">
              <uni-icons type="gear" size="24"></uni-icons>
            </view>
            <text class="menu-text">设置</text>
          </view>
        </view>

        <!-- 客户经理信息 -->
        <view class="manager-info">
          <image class="manager-avatar" src="/static/head.png" mode="aspectFill"></image>
          <view class="manager-detail">
            <text class="manager-name">专属客户经理-邱发浩</text>
            <text class="manager-duration">已为您服务2个月</text>
          </view>
          <view class="contact-btn">
            <uni-icons type="phone" size="20" color="#1890ff"></uni-icons>
          </view>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: '工作台',
      // isFinanceExpanded: false,
      // isInventoryExpanded: false,
      servicePopupVisible: false,
      isTriggered: false, // 下拉刷新状态
      isDropdownClosing: false, // 下拉框关闭动画状态

      // 搜索相关数据
      searchKeyword: '', // 搜索关键词
      searchTypes: ['合租', '整租', '独栋', '租客'], // 搜索类型选项
      currentSearchType: 0, // 当前选中的搜索类型索引
      showTypeDropdown: false, // 是否显示类型下拉框
      searchHistory: ['紫金花园', '金地阳光城', '保利华庭', '光谷青年城'], // 搜索历史
      recommendTags: ['紫峰花园-东门', '金地中心', '光谷8号', '华乐苑', '当代香溪公馆-A栋'] // 推荐标签
    }
  },
  onShow() {
    // 监听 TabBar 切换事件, 切换到工作台时重新加载数据
    //无效方法
    uni.$emit('tabChange');
  },
  methods: {
    /**
     * 跳转到测试列表页面
     */
    goToTest() {
      uni.navigateTo({
        url: '/pages/test/list'
      });
    },

    /**
      * 打开搜索弹出层
      */
    openSearchPopup() {
      this.$refs.searchPopup.open();
      this.showTypeDropdown = false;
      // 重置搜索关键词，提供更好的用户体验
      this.searchKeyword = '';
    },

    /**
     * 关闭搜索弹出层
     */
    closeSearchPopup() {
      this.$refs.searchPopup.close();
      this.searchKeyword = '';
      this.closeTypeDropdown();
    },

    /**
     * 切换搜索类型下拉框显示状态
     */
    toggleTypeDropdown() {
      if (this.showTypeDropdown) {
        this.closeTypeDropdown();
      } else {
        this.showTypeDropdown = true;
        this.isDropdownClosing = false;
      }
    },

    /**
        * 关闭搜索类型下拉框
        */
    closeTypeDropdown() {
      this.isDropdownClosing = true;
      setTimeout(() => {
        this.showTypeDropdown = false;
        this.isDropdownClosing = false;
      }, 200); // 动画持续时间
    },

    /**
     * 选择搜索类型
     * @param {Number} index - 搜索类型索引
     */
    selectSearchType(index) {
      this.currentSearchType = index;
      this.closeTypeDropdown();
    },

    /**
     * 使用搜索标签
     * @param {String} tag - 搜索标签文本
     */
    useSearchTag(tag) {
      this.searchKeyword = tag;
      // 可以在这里直接执行搜索
      this.doSearch();
    },

    /**
     * 清空搜索历史
     */
    clearSearchHistory() {
      uni.showModal({
        title: '提示',
        content: '确定要清空搜索历史吗？',
        success: (res) => {
          if (res.confirm) {
            this.searchHistory = [];
            uni.showToast({
              title: '已清空搜索历史',
              icon: 'success'
            });
          }
        }
      });
    },

    /**
     * 执行搜索操作
     */
    doSearch() {
      if (!this.searchKeyword.trim()) {
        return;
      }

      // 将搜索关键词添加到历史记录
      if (!this.searchHistory.includes(this.searchKeyword)) {
        this.searchHistory.unshift(this.searchKeyword);
        // 限制历史记录数量
        if (this.searchHistory.length > 10) {
          this.searchHistory.pop();
        }
      }

      // 这里可以添加实际的搜索逻辑
      console.log('搜索类型:', this.searchTypes[this.currentSearchType]);
      console.log('搜索关键词:', this.searchKeyword);

      // 跳转到搜索结果页面
      uni.navigateTo({
        url: `/pages/search/result?keyword=${encodeURIComponent(this.searchKeyword)}&type=${this.currentSearchType}`
      });

      // 关闭搜索弹出层
      this.closeSearchPopup();
    },

    /**
     * 打开搜索弹出层
     */
    goToSearch() {
      this.openSearchPopup();
    },

    /**
     * 跳转到新手引导页面
     */
    goToGuide() {
      uni.navigateTo({
        url: '/pages/guide/index'
      });
    },
    /**
    * 跳转到更多应用页面
    */
    goToMore() {
      uni.navigateTo({
        url: '/pages/apps/index'
      });
    },
    /**
     * 跳转到空房快查页面
     */
    goToVacantHouse() {
      uni.navigateTo({
        url: '/pages/house/vacant'
      });
    },
    /**
     * 跳转到30天离店合同页面
     */
    goToLeaveContract() {
      uni.navigateTo({
        url: '/pages/contract/leave'
      });
    },
    /**
     * 跳转到30天搬入合同页面
     */
    goToIncomingContract() {
      uni.navigateTo({
        url: '/pages/contract/incoming'
      });
    },
    /**
     * 跳转到合同到期页面
     */
    goToExpireContract() {
      uni.navigateTo({
        url: '/pages/contract/expire'
      });
    },
    /**
     * 跳转到退租未结页面
     */
    goToUnfinishedContract() {
      uni.navigateTo({
        url: '/pages/contract/unfinished'
      });
    },
    /**
    * 跳转到待收逾期页面
    */
    goToOverdue() {
      uni.navigateTo({
        url: '/pages/overdue/index'
      });
    },
    /**
     * 跳转到待绑定合同页面
     */
    goToBindContract() {
      uni.navigateTo({
        url: '/pages/contract/bind'
      });
    },
    /**
     * 跳转到待付逾期页面
     */
    goToPayableOverdue() {
      uni.navigateTo({
        url: '/pages/overdue/payable'
      });
    },
    /**
     * 打开个人中心抽屉
     */
    openMine() {
      this.$refs.drawer.open();
    },
    /**
     * 处理抽屉状态变化事件
     * @param {Object} e - 抽屉状态变化事件对象
     */
    handleDrawerChange(e) {
      console.log('drawer status:', e);
    },
    /**
     * 通用页面导航方法
     * @param {String} url - 目标页面路径
     */
    navigateTo(url) {
      uni.navigateTo({
        url
      });
    },
    /**
    * 打开VIP服务群弹出层
    * 通过事件总线触发主页面的弹窗显示
    */
    openServicePopup() {
      // 使用事件总线触发一个全局事件
      uni.$emit('openServicePopup')
    },
    /**
    * 打开收款码弹出层
    * 通过事件总线触发主页面的收款码弹窗显示
    */
    openQrcodePopup() {
      // 使用事件总线触发打开收款码弹出层事件
      uni.$emit('openQrcodePopup')
    },
    /**
    * 处理扫码功能
    * 调用系统扫码API并处理结果
    */
    handleScan() {
      uni.scanCode({
        success: (res) => {
          console.log('扫码成功：', res.result)
          // 根据扫码结果进行业务处理
          uni.showToast({
            title: '扫码成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          console.error('扫码失败：', err)
          uni.showToast({
            title: '扫码失败',
            icon: 'error'
          })
        }
      })
    },
    /**
     * 下拉刷新处理函数
     */
    onRefresh() {
      // 设置刷新状态为true
      this.isTriggered = true;

      // 模拟数据刷新
      setTimeout(() => {
        // 这里可以添加实际的数据刷新逻辑
        console.log('数据已刷新');

        // 刷新完成后，设置状态为false
        this.isTriggered = false;

        // 显示刷新成功提示
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1000
        });
      }, 1000);
    },
    /**
   * 下拉过程中的处理函数
   * @param {Object} e - 下拉事件对象
   */
    onPullingDown(e) {
      // 可以根据下拉的距离做一些视觉反馈
      console.log('下拉中...', e);
    },
  }
}
</script>

<style lang="scss" scoped>
.workbench-container {
  min-height: 100%;
  position: relative;
  height: 100%;
  /* 修改为100%而不是100vh，跟随父元素高度 */
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .drawer-content {
    padding: 30rpx;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  :deep(.uni-drawer__content) {
    width: 80vw !important;
    border-top-right-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    overflow: hidden;
    z-index: 999; // 添加这行，确保抽屉在最上层
  }

  :deep(.uni-drawer__mask) {
    z-index: 998; // 添加这行，确保遮罩在 TabBar 之上
  }

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 50rpx;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .enterprise-info {
      .enterprise-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }

      .enterprise-tag {
        font-size: 24rpx;
        color: #1890ff;
        background-color: rgba(24, 144, 255, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
      }
    }
  }

  .menu-list {
    flex: 1;

    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      .menu-icon {
        margin-right: 20rpx;
        color: #666;
      }

      .menu-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }

      .menu-action {
        font-size: 24rpx;
        color: #1890ff;
        background-color: #e6f7ff;
        padding: 6rpx 16rpx;
        border-radius: 30rpx;
      }

      .version {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .manager-info {
    margin-top: auto;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #f5f5f5;
    border-radius: 12rpx;

    .manager-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .manager-detail {
      flex: 1;

      .manager-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }

      .manager-duration {
        font-size: 24rpx;
        color: #666;
      }
    }

    .contact-btn {
      padding: 10rpx;
    }
  }
}

/* 固定在顶部的搜索区域 */
.search-header {
  position: sticky;
  top: var(--window-top);
  background-color: #1890ff;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;

  input {
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }
}

.header-icons {
  display: flex;
  gap: 20rpx;
  margin-left: 20rpx;
  color: #fff;

  .header-icon {
    width: 48rpx;
    height: 48rpx;
  }
}

/* 可滚动内容区域 */
.scrollable-content {
  flex: 1;
  /* 使用flex布局，让内容区域自动填充剩余空间 */
  overflow: auto;
  /* 内容超出时可滚动 */
}

.header {
  background-color: #1890ff;
  color: #fff;
  padding: 20rpx;
}

.data-section {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;

  .data-item {
    flex: 1;
    text-align: left;
    padding: 20rpx;

    .label {
      font-size: 26rpx;
      margin-bottom: 16rpx;
      display: block;
      opacity: 0.9;
    }

    .amount {
      font-size: 48rpx;
      font-weight: bold;
      display: block;
      line-height: 1.4;
      margin-bottom: 16rpx;
    }

    .sub-text {
      font-size: 20rpx;
      opacity: 0.7;
      display: block;
      margin-top: 12rpx;
      line-height: 1.4;
      margin-bottom: 8rpx;
      letter-spacing: 2rpx;
    }
  }
}

.function-grid {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10rpx;
  padding: 20rpx;
  justify-content: flex-start;
}

.grid-item {
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 10rpx;
  }

  text {
    font-size: 24rpx;
    color: #666;
  }
}

.guide-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff8e6;
  padding: 20rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;

  .uni-icons {
    color: #8B4513;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: -16rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 12rpx;
      height: 12rpx;
      background-color: #ff4d4f;
      border-radius: 50%;
    }
  }
}

.guide-content {
  .guide-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-right: 20rpx;
    background-color: #FFE4BA;
    padding: 4rpx 16rpx;
    border-radius: 30rpx;
  }

  .guide-desc {
    font-size: 24rpx;
    color: #666;
  }
}

.reminder-section {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.reminder-section {
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .reminder-list {
    display: flex;
    justify-content: space-between;
  }

  .reminder-item {
    text-align: center;
    flex: 1;

    .number {
      font-size: 40rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      margin-bottom: 12rpx;
      margin-left: auto;
      margin-right: auto;
      background-color: #f5f5f5;
      color: #333;
      padding: 10rpx;
      border-radius: 30rpx;
      width: 80rpx;
      height: 80rpx;

      &.active {
        background-color: #1890ff;
        color: #fff;
      }
    }

    .label {
      font-size: 24rpx;
      color: #999;
      display: block;
    }
  }
}

.banner {
  margin-top: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 160rpx;
  }
}

.work-order {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx 0;

  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .order-count {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .number {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 12rpx;
      background-color: #f5f5f5;
      width: 80rpx;
      height: 80rpx;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: -1rpx;
        right: -1rpx;
        width: 16rpx;
        height: 16rpx;
        background-color: #ff4d4f;
        border-radius: 50%;
      }
    }

    .label {
      font-size: 24rpx;
      color: #666;
      font-weight: bold;
    }
  }
}

.content-wrapper {
  background-color: #f5f5f5;
  border-radius: 30rpx 30rpx 0 0;
  padding: 0 20rpx;
  position: relative;
  flex: 1;
  box-sizing: border-box;
}

:deep(.uni-collapse) {
  background-color: transparent;
  border: none !important;

  .uni-collapse-item {
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    border: none !important;

    .uni-collapse-item__title {
      padding: 20rpx;
    }

    .uni-collapse-item__wrap {
      background-color: #fff;
      border: none !important;
    }

    .uni-collapse-item__content {
      padding: 0 !important;
    }

    // 继承原有样式
    .finance-content,
    .inventory-content {
      padding: 20rpx;

      .finance-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 0;

        .finance-left {
          display: flex;
          flex-direction: column;

          .big-amount {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            line-height: 1.2;
          }

          .month-label {
            font-size: 24rpx;
            color: #666;
          }
        }

        .finance-right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .finance-data {
            margin-bottom: 10rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;

            &:last-child {
              margin-bottom: 0;
            }

            .data-amount {
              font-size: 24rpx;
              font-weight: bold;
              color: #333;
              margin-right: 8rpx;
            }

            .data-label {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
      }

      .divider {
        height: 1rpx;
        background-color: #eee;
        margin: 20rpx 0;
      }

      .house-operation {
        margin-top: 30rpx;

        .operation-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 20rpx;
          font-weight: bold;
        }

        .operation-stats {
          display: flex;
          justify-content: space-between;
          background-color: #f8f8f8;
          padding: 20rpx;
          border-radius: 12rpx;

          .stat-item {
            text-align: center;
            flex: 1;
            position: relative;

            &:not(:last-child):after {
              content: '';
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 2rpx;
              height: 40rpx;
              background-color: #e8e8e8;
            }

            .number {
              font-size: 36rpx;
              font-weight: bold;
              color: #333;
              margin-bottom: 12rpx;
              display: block;
            }

            .label {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}

// 添加搜索弹出层样式
.search-popup {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .search-popup-header {
    padding: 20rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #f0f0f0;

    .search-popup-input-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      padding: 0 20rpx;
      height: 70rpx;

      .search-type-selector {
        display: flex;
        align-items: center;
        padding-right: 20rpx;
        border-right: 1rpx solid #ddd;
        margin-right: 20rpx;

        text {
          font-size: 28rpx;
          color: #333;
          margin-right: 10rpx;
        }
      }

      .search-popup-input {
        flex: 1;
        display: flex;
        align-items: center;

        input {
          flex: 1;
          height: 70rpx;
          font-size: 28rpx;
          margin-left: 10rpx;
        }
      }
    }

    .search-popup-cancel {
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
    }
  }

  .search-type-dropdown {
    background-color: #f5f5f5; // 改为灰色背景
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100rpx;
    left: 20rpx;
    width: 160rpx;
    z-index: 10;
    border-radius: 8rpx;
    transform-origin: 30rpx 0;
    /* 设置变换原点在箭头位置 */
    animation: dropdown-open 0.25s ease-out forwards;
    border: none; // 去掉边框

    &.dropdown-closing {
      animation: dropdown-close 0.2s ease-in forwards;
    }

    &::before {
      content: '';
      position: absolute;
      top: -8rpx;
      left: 30rpx;
      width: 16rpx;
      height: 16rpx;
      background-color: #f5f5f5; // 箭头也改为灰色背景
      border: none; // 去掉箭头的边框
      transform: rotate(45deg);
    }

    .search-type-item {
      padding: 20rpx;
      font-size: 28rpx;
      color: #333;
      text-align: center;
      border-bottom: 1rpx solid #eee; // 保留项目之间的分隔线，但颜色更淡

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background-color: #e8e8e8; // 点击时的背景色也相应调整
      }
    }
  }

  @keyframes dropdown-open {
    0% {
      opacity: 0;
      transform: scaleY(0);
    }

    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  @keyframes dropdown-close {
    0% {
      opacity: 1;
      transform: scaleY(1);
    }

    100% {
      opacity: 0;
      transform: scaleY(0);
    }
  }

  .search-history,
  .search-recommend {
    padding: 30rpx 20rpx;

    .search-section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      text {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .search-tags {
      display: flex;
      flex-wrap: wrap;

      .search-uni-tag {
          margin: 0 20rpx 20rpx 0;
        }
    }
  }

  .search-recommend {
    border-top: 20rpx solid #f5f5f5;
  }
}

// 确保弹出层在最上层
:deep(.uni-popup) {
  z-index: 999 !important;
}
</style>